<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en">
<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp">
	<title>学习资料</title>
  <link rel="stylesheet" href="${ctx}/static/css/mdui.css">
  <link rel="stylesheet" href="${ctx}/static/css/docs.css">
  <style>
    table .mdui-icon {
      color: #F9A825;
    }
    #createSubject{
    width: 80%;
    height:auto;
	margin: auto;
	font-size: 15px;
	text-align: center;
	border: dashed 5px white;
	border-radius: 20px;
	background-color: lightgoldenrodyellow;
	display: none; 
	/*visibility: hidden;*/
	position: absolute;
	top: 180px;
	left: 20%;
    }
  </style>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-blue mdui-theme-accent-pink mdui-loaded">
<header class="mdui-appbar mdui-appbar-fixed">
  <div class="mdui-toolbar mdui-color-theme">
    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
    <a href="./index.html" class="mdui-typo-headline mdui-hidden-xs">员工培训系统</a>
          <a href="" class="mdui-typo-title">学习资料</a>
        <div class="mdui-toolbar-spacer"></div>
    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
  </div>
</header>
<%@include file="../common/leftMenuAdmin.jsp"%>
<a id="anchor-top"></a>

<div class="mdui-container doc-container">
  <div class="mdui-clearfix mdui-typo">
    <h1 class="doc-title mdui-text-color-theme mdui-col-md-6 mdui-col-md-12 mdui-p-x-0">学习资料</h1>
  </div>
  <div class="mdui-clearfix introduce-wrap mdui-hidden mdui-typo mdui-p-y-2 mdui-p-x-1 mdui-m-b-3" style="border: 1px solid #eee">
    <div class="introduce-detail mdui-clearfix">
      <div class="preview mdui-float-left mdui-p-r-2 mdui-col-md-3">
        <img src="./static/img/card.jpg" alt="" style="width: 100%;">
        <p class="mdui-text-center doc-title mdui-text-color-theme ">科目一</p>
      </div>
      <div class="introduce mdui-float-left mdui-p-l-2 mdui-col-md-9">
        <h2 class="doc-title mdui-text-color-theme mdui-p-x-0  mdui-m-x-0">科目介绍</h2>
        <p class="introduce-content">科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍科目一的介绍</p>
      </div>
      <div class="mdui-clearfix">
        <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-float-left mdui-m-b-2 mdui-m-r-2 discuss-post" id="introduceEdit">编辑</button>
      </div>
    </div>
    
    <div class="introduce-edit mdui-hidden mdui-clearfix">
      <div class="preview mdui-float-left mdui-p-r-2 mdui-col-md-3">
        <div class="mdui-col-md-12 mdui-p-t-1" style="min-width: 168px;border: 1px solid #eee;">
          <img src="./static/img/card.jpg" alt="">
        </div>
        <div class="mdui-clearfix mdui-col-md-12">
          <input type="file" id="uploadAvatars1" hidden="">
          <button class="mdui-btn mdui-btn-raised mdui-col-xs-12 mdui-col-md-12 mdui-m-t-1" id="uploadBtn1">上传照片</button>
        </div>
      </div>
      <div class="introduce mdui-float-left mdui-p-l-2 mdui-col-md-9">
        <h2 class="doc-title mdui-text-color-theme mdui-p-x-0  mdui-m-x-0">科目介绍</h2>
        <div class="mdui-textfield mdui-textfield-floating-label">
          <label class="mdui-textfield-label">请输入科目介绍</label>
          <textarea class="mdui-textfield-input" id="cardContent" rows="80"></textarea>
        </div>
        <div class="mdui-clearfix">
          <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-float-right mdui-m-b-2 discuss-post" id="saveContent">保存</button>
        </div> 
      </div>
    </div>
  </div>
  <div class="mdui-clearfix mdui-typo">
    <input type="file" id="uploadAvatars" hidden>
    <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-m-a-1" id="uploadBtn"><i class="mdui-icon material-icons" style="position: relative; top: -1px; left: -2px">file_upload</i>上传</button>
    <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-m-a-1"><i class="mdui-icon material-icons" style="position: relative; top: -1px; left: -2px">delete</i>删除</button>
    <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-m-a-1" id="folderNew"><i class="mdui-icon material-icons" style="position: relative; top: -1px; left: -2px">create_new_folder</i>新建科目</button>
  </div>
  <div class="mdui-table-fluid mdui-typo">
    <table class="mdui-table mdui-table-hoverable mdui-table-selectable">
      <thead>
        <tr>
          <th>文件名</th>
          <th>修改时间</th> 
          <th>操作</th>
          <th>备注</th>
        </tr>
      </thead>
    <tbody id="tbody">
        <c:forEach items="${subjectList}" var="subjectList" varStatus="status">
        <tr>
       <td>
            <i class="mdui-icon material-icons" style="position: relative; top: -1px; left: -2px">folder</i>
            <a href="${ctx}/resource/getSubject?subjectId=${subjectList.subject_id}">${subjectList.subject_name}</a>
          </td>
          <td>${subjectList.update_date}</td>
          <td><a  href="${ctx}/resource/updateSubject?subjectId=${subjectList.subject_id}"><font size="2" color="blue">修改</font></a>&nbsp;&nbsp;
			<a  href="javascript:if(confirm('确实要删除该科目吗?'))location='${ctx}/resource/delSubject?subjectId=${subjectList.subject_id}'"><font size="2" color="blue">删除</font></a></td> 
        </tr>

        </c:forEach>
      </tbody> 
    </table>
  </div>
</div>
<div id="createSubject" >
  <label>科目名字:</label>
  <input id="subjectName" name="subjectName" type="text" value=""><br>
   <label>科目封面:</label>
   <input id="subjectPicture" name="subjectPicture" type="file" value=""><font size="1" color="red">Tips：请选择JPG或PNG格式图片</font><br>
  <img width="200px" height="250px" id="pic"  src="${ctx}/images/add.png" style="margin-right: 20px"><br>
  <label>科目描述:</label>
  <textarea id="subjectDescribe" name="subjectDescribe"  value=""></textarea><br>
  
  <label>备注：</label>
  <input id="remark" name="remark" type="text" value=""><br>
  <button id="submitForm">确认提交</button>
</div>
<%@include file="../common/theme.jsp"%>

<script>

$("#folderNew").click(function(){

$("#createSubject").slideDown("slow");
});
//

$("#submitForm").click(function(){
var subjectName=$("#subjectName").val();
var subjectDescribe=$("#subjectDescribe").val();
var subjectPicture=$("#subjectPicture").val();
var remark=$("#remark");
var docObj=document.getElementById("subjectPicture");
var fileObj = docObj.files[0];
alert("科目名或者科目描述不能为空");
alert(fileObj);
if(subjectName.length==0||subjectDescribe.length==0){
alert("科目名或者科目描述不能为空");
return false;
}
//------------------------------------------------
//开始打包进行ajax请求
  var form = new FormData();//form 对象  
 form.append("subjectPicture",fileObj);// 文件对象
 form.append("subjectName",subjectName);// 文件对象
 form.append("subjectDescribe",subjectDescribe);// 文件对象 
 
  
var options = {
                url:"${ctx}/resource/saveSubject",
                type: 'post',
                dataType: 'json',
                data:form,  
              processData: false,  
                contentType:false,
                success: function (data) {
                	var status=data.status;
                	var msg=data.msg;
                	alert(msg)
                	$("#createSubject").fadeOut();
                  location.reload();
                }
            };
           $.ajax(options);
           });
//判断图片类型
function getObjectURL(file) {
    if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        var url = null;
        if(window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
 $("#subjectPicture").change(function() {
        var objUrl = getObjectURL(this.files[0]);
        console.log(2);
        if(objUrl) {
            $("#pic").attr("src", objUrl);
        }
    });
 $("input[placeholder=请输入]").hover(
            function() {
                $(this).bind("focus", function() {
                    $(this).attr("placeholder","");
                });});
             


 $$('#folderNew').on('click', function () {
   var pretr = '<tr id="folderNewModule">\
          <td class="mdui-table-cell-checkbox">\
            <label class="mdui-checkbox">\
            <input type="checkbox">\
            <i class="mdui-checkbox-icon"></i></label>\
          </td>\
          <td class="mdui-p-l-1">\
            <i class="mdui-icon material-icons mdui-float-left" style="position: relative; left: -2px;margin-right: 8px; line-height: 40px;">folder</i>\
            <div class="mdui-textfield mdui-col-md-3 mdui-p-a-0 mdui-m-r-1">\
              <input class="mdui-textfield-input" type="text" placeholder="请输入章节号" id="folderNewChapter" />\
            </div>\
            <div class="mdui-textfield mdui-col-md-3 mdui-p-a-0">\
              <input class="mdui-textfield-input" type="text" placeholder="请输入项目名称" id="folderNewValue" />\
            </div>\
            <button class="mdui-col-xs-1 mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-m-x-1"  id="folderSure">确定</button>\
            <button class="mdui-col-xs-1 mdui-btn mdui-btn-raised mdui-ripple mdui-m-x-1" id="folderCancel">取消</button>\
          </td>\
          <td>\
            --\
          </td>\
          <td>\
            --\
          </td>\
        </tr>';
    $('#tbody').prepend(pretr);
 });

 $$('#tbody').on('click', '#folderCancel', function () {
   $$('#folderNewModule').remove();
 });
 $$('#tbody').on('click', '#folderSure', function () {
   var val = $$('#folderNewValue').val().trim();
   var trNew = '<tr>\
          <td class="mdui-table-cell-checkbox">\
            <label class="mdui-checkbox">\
            <input type="checkbox">\
            <i class="mdui-checkbox-icon"></i></label>\
          </td>\
          <td>\
            <i class="mdui-icon material-icons" style="position: relative; top: -1px; left: -2px">folder</i>\
            <a href="./uploadDatas.html">' + val + '</a>\
          </td>\
          <td>\
            --\
          </td>\
          <td>\
            2017-08-24\
          </td>\
          </tr>';
   $$('#folderNewModule').remove();
   $('#tbody').prepend(trNew);
 });
  



 // 函数值行

 introduce();
</script>
</body>
</html>
